<template>
  <div class="toolbar">
    <div class="tool">
      <span>PDF 批注</span>
    </div>
    <div class="tool">
      <label for="brush-size">线粗细：</label>
      <input
        type="number"
        class="form-control text-right"
        :value="brushSize"
        @input="updateBrushSize"
        id="brush-size"
        max="50"
      />
    </div>
    <div class="tool">
      <label for="font-size">字体大小：</label>
      <select id="font-size" class="form-control" v-model="fontSize" @change="selectFontSize">
        <option v-for="size in fontSizes" :key="size" :value="size">
          {{ size }}
        </option>
      </select>
    </div>
    <div class="tool">
      <button
        v-for="color in colors"
        :key="color"
        class="color-tool"
        :class="{ active: color === selectedColor }"
        :style="{ backgroundColor: color }"
        @click="selectColor(color)"
      ></button>
    </div>
    <div class="tool">
      <button
        class="tool-button"
        :class="{ active: tool === 'selector' }"
        @click="setTool('selector')"
      >
        <i class="fa fa-hand-paper-o" title="Free Hand"></i>
      </button>
    </div>
    <div class="tool">
      <button class="tool-button" :class="{ active: tool === 'pencil' }" @click="setTool('pencil')">
        <i class="fa fa-pencil" title="Pencil"></i>
      </button>
    </div>
    <div class="tool">
      <button class="tool-button" :class="{ active: tool === 'text' }" @click="setTool('text')">
        <i class="fa fa-font" title="Add Text"></i>
      </button>
    </div>
    <div class="tool">
      <button class="tool-button" :class="{ active: tool === 'arrow' }" @click="setTool('arrow')">
        <i class="fa fa-long-arrow-right" title="Add Arrow"></i>
      </button>
    </div>
    <div class="tool">
      <button
        class="tool-button"
        :class="{ active: tool === 'rectangle' }"
        @click="setTool('rectangle')"
      >
        <i class="fa fa-square-o" title="Add rectangle"></i>
      </button>
    </div>
    <div class="tool">
      <button class="tool-button" :class="{ active: tool === 'image' }" @click="setTool('image')">
        <i class="fa fa-picture-o" title="Add an Image"></i>
      </button>
    </div>
    <!-- <div class="tool">
      <button class="btn btn-danger btn-sm" @click="triggerFn('select')">
        选中
      </button>
    </div> -->
    <div class="tool">
      <!-- <button class="btn btn-light btn-sm" @click="triggerFn('import')">
        <i class="fa fa-save"></i> 导出PDF
      </button> -->
      <!-- <button class="btn btn-light btn-sm" @click="triggerFn('save')">
        <i class="fa fa-save"></i> 保存
      </button> -->
    </div>
  </div>
</template>

<script setup>
import "../css/index.css";
import { ref } from "vue";

/** 线粗细 */
const brushSize = ref(1);
/* 字体大小 */
const fontSize = ref(16);
const fontSizes = [10, 12, 16, 18, 24, 32, 48, 64, 72, 108];
const colors = ["#212121", "red", "blue", "green", "yellow"];
const selectedColor = ref("#212121");
const tool = ref("selector"); // 当前激活的工具

const emits = defineEmits(["clickEvent"]);

const updateBrushSize = (value) => {
  // 应用笔刷大小的额外逻辑
  emits("clickEvent", {
    type: "brushSize",
    value: brushSize.value,
  });
};

const selectColor = (color) => {
  selectedColor.value = color;
  emits("clickEvent", {
    type: "color",
    value: color,
  });
};

const selectFontSize = () => {
  emits("clickEvent", {
    type: "fontSize",
    value: fontSize.value,
  });
};

const setTool = (selectedTool) => {
  tool.value = selectedTool;
  emits("clickEvent", {
    type: "tool",
    value: selectedTool,
  });
  // 启用选中工具的额外逻辑
};

const triggerFn = (fnName) => {
  emits("clickEvent", {
    type: "fn",
    value: fnName,
  });
};

defineExpose({
  tool,
});
</script>

<style>
.toolbar {
  position: sticky;
  top: 0;
  z-index: 99;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #333; /* Dark background for the toolbar */
  padding: 0 10px;
  height: 50px;
  color: #fff;
}

.tool {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.tool label {
  margin-right: 5px;
}

.tool input[type="number"],
.tool select {
  border: 1px solid #666;
  border-radius: 4px;
  background-color: #222;
  color: #fff;
  padding: 5px;
  height: auto;
}

.tool input[type="number"] {
  width: 50px;
}

.color-tool {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 5px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.color-tool:hover,
.color-tool.active {
  transform: scale(1.3);
}

.tool-button {
  background-color: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  margin-right: 5px;
  padding: 5px;
  transition: background-color 0.2s ease;
}

.tool-button:hover,
.tool-button.active {
  background-color: #555; /* Slightly lighter background on hover */
}

.btn.btn-danger.btn-sm,
.btn.btn-light.btn-sm {
  padding: 5px 10px;
  border-radius: 4px;
  margin-right: 5px;
  transition: background-color 0.2s ease;
}

.btn.btn-danger.btn-sm:hover,
.btn.btn-light.btn-sm:hover {
  background-color: #555; /* Slightly lighter background on hover */
}

/* Clearfix for floated elements */
.tool:after {
  content: "";
  display: table;
  clear: both;
}

/* Base button style */
.btn.btn-light.btn-sm {
  padding: 8px 12px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  color: #333;
  background-color: #f8f9fa;
  transition:
    background-color 0.3s,
    transform 0.2s,
    box-shadow 0.2s;
  outline: none;
  cursor: pointer;
  margin-right: 10px;
}

/* Button hover and active state */
.btn.btn-light.btn-sm:hover,
.btn.btn-light.btn-sm:active {
  background-color: #e2e6ea;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Icon style */
.btn.btn-light.btn-sm .fa {
  margin-right: 5px;
}

/* Gradient background for a modern look */
.btn-save-pdf {
  background-image: linear-gradient(to right, #6dd5ed, #2193b0);
  color: white;
}

.btn-save-data {
  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
  color: white;
}

/* Hover effect for gradient buttons */
.btn-save-pdf:hover,
.btn-save-data:hover {
  opacity: 0.9;
}

/* Active state for gradient buttons */
.btn-save-pdf:active,
.btn-save-data:active {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.form-control {
  cursor: pointer;
}
</style>
